<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
    <meta name="viewport" content="minimal-ui">
    <title>仿手机QQ音乐app-Demo展示，桃子同学的个人空间</title>
    <link rel="icon" href="/public/images/index/about/favicon.ico" >
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/3.2.1/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="//cdn.bootcss.com/jScrollPane/2.0.0beta11/style/jquery.jscrollpane.min.css"/>
    <link rel="stylesheet" href="/public/styles/base.css">
    <style>
        html{font-size: 10px;height: 100%;}
        body{height: 100%;}
        a{color:#B4B9BD;}
        .outer{background: #404549;width: 320px;height: 528px;margin:0 auto;position: relative;overflow: hidden}
        #btnGroup{position: absolute; left: 50%; top: 10px; margin-left: 215px;}
        #btnGroup li{display: block;cursor: pointer;margin: 10px 0;}
        .header{position: relative;text-align: center;font-size: 2.1rem;color:#A9AEB2;}
        .ico-down{position: absolute; left: -8px; top: -2px; width: 65px;}
        .header .title{color: #DEE1E4; line-height: 3.5rem; height: 3.5rem; overflow: hidden; width: 54%; margin: 0 auto;}
        .header a{position: absolute; right: 0; top: 0;}
        .header a img{width: 65px;}

        .content{height:calc(100% - 222px);width: 100%;}
        .content .singer{color:#DEE1E4;text-align: center;font-size: 1.7rem;position: relative}
        .content .singer strong{color:#A9AEB2}
        .content .singer span{color:#DEE1E4;text-align: center;font-size: 1.5rem;position: relative}
        .content .cover-img{opacity: 0;margin: 10px auto 0; border-radius: 50%; overflow: hidden;border: 7px solid #2E3337;animation: loop 20s linear infinite;}
        .content .cover-img.pause{animation-play-state:paused;}
        .content .cover-img img{width: 100%;}
        @keyframes loop{
            from {transform:rotate(0deg);}
            to {transform:rotate(360deg);}
        }
        .foot{position: absolute; height: 180px; width: 100%; bottom: 0; left: 0;}
        .foot .music-progress{color:#fff;margin: 0 8px;height: 22px;border-top:1px solid transparent;font-size: 1.5rem}
        .foot .music-progress .current-time{float: left;}
        .foot .music-progress .line-bar{background: #5F574A; height: 1px; margin: 10px 50px 0;border:1px solid #4D4D4D;position: relative;cursor: pointer}
        .foot .music-progress .line-bar .cover{width: 100%; height: 16px; overflow: hidden; top: -8px; position: absolute;}
        .foot .music-progress .line-bar .progress-dot{background: #2AC57D; width: 16px; height: 16px; border-radius: 16px; left: 0; position: absolute; top: 0;cursor: pointer;}
        .foot .music-progress .line-bar .progress-dot:before{content: ""; width: 9999px; height: 3px; background: #2AC57D; position: absolute; right: 15px; top: 6px;}
        .foot .music-progress .total-time{float: right;margin-top: -12px;}
        .foot .operate{text-align: center;margin-top:10px;color:#2AC57D;}
        .foot .operate .backward,.foot .operate .forward{width: 75px; cursor: pointer;}
        .foot .operate .player{margin: 0 18px; border: 2px solid; border-radius: 50px; width: 75px; cursor: pointer;}
        .foot .btn-list{overflow: auto; color: #A9AEB2; margin: 20px auto 0; font-size: 2.4rem;}
        .foot .btn-list li{width: 20%; float: left; text-align: center; line-height: 53px;height: 53px;overflow: hidden;}
        .foot .btn-list li img{width: 90%;margin-top: -13%;cursor: pointer}

        .body-cover{position: absolute; top: 0; left: 0; background: #000; z-index: 10; height: 100%; opacity: 0.4; width: 100%;display: none;}

        .top-container{background: #31C27C; height: 3.5rem; color: #fff; position: absolute; top: -3.5rem; left: 0; width: 100%; line-height: 3.5rem;transition: top .5s;}
        .top-container.show{top:0;}
        .top-container img{width: 30px;margin-left: 6px;}
        .top-container .text{vertical-align: middle}

        .bot-container{width: 100%;height: 445px;position: absolute;background: rgba(35, 36, 37, 0.97);left: 0;bottom: -445px;transition: bottom .3s;z-index: 11}
        .bot-container.show{bottom: 0;}
        .bot-container .list-title{height: 53px; position: relative;}
        .bot-container .list-title img{width: 53px; position: absolute; left: 0; top: 0;cursor: pointer}
        .bot-container .list-title h5{line-height: 53px; color: #fff; text-align: center;}
        .bot-container .list-title a{width: 53px; line-height: 53px; text-align: center; position: absolute; right: 0; top: 0;}
        .bot-container .list-title a:hover,.bot-container .list-title a:focus{color: #B4B9BD;}
        .bot-container ul{border-top: 2px solid #343132; border-bottom: 2px solid #343132; height: 339px; width: 100% !important;}
        .bot-container ul li{font-size: 15px; line-height: 40px; border-bottom: 1px solid #2E2E2E;padding-left: 10px;}
        .bot-container ul li a,.bot-container ul li a:hover,.bot-container ul li a:focus{color:#fff;}
        .bot-container ul li.active a{color:#31C27C;}
        .bot-container ul li.active .singer{color:#31C27C;}
        .bot-container ul li .name{margin-right: 5px;}
        .bot-container ul li .singer{font-size: 12px;color:#B4B9BD;}
        .bot-container ul li .play{display: none;margin-left: 35px; height: 16px; position: relative;}
        .bot-container ul li .play .line{background: #31C27C; width: 3px; height: 16px; position: absolute; bottom: 0; left: 0;animation:music-play .4s linear infinite alternate; }
        .bot-container ul li .play .line.two{left:5px;animation-delay: .1s;}
        .bot-container ul li .play .line.three{left:10px;animation-delay: .2s;}
        .bot-container ul li .play .line.four{left:15px;animation-delay: .3s;}
        .bot-container ul li.active .play{display: inline-block;}
        @keyframes music-play{from {height:0;} to {height:16px;}}
        .bot-container ul li .delete{float: right; width: 60px; margin: -9px -14px; cursor: pointer;}
        .bot-container .close-list{color: #fff; display: block; text-align: center; line-height: 53px; font-size: 15px;}
        .bot-container .close-list:hover,.bot-container .close-list:focus{color:#fff}
        .list-item-template{display: none;}
        .jspContainer{width: 100% !important;}
        .jspVerticalBar{width: 6px;}
        .jspTrack{background: #252525;}
        .jspDrag{background: #343434;border-radius: 10px;}
    </style>
</head>
<body>
    <div class="outer">
        <audio id="audio"></audio>
        <div class="header">
            <img class="ico-down" src="/public/images/index/demo/demo_04/player_btn_close_normal.png">
            <p class="title" id="songName"></p>
            <a href="javascript:;"><img src="/public/images/index/demo/demo_04/player_btn_more_normal.png"></a>
        </div>
        <div class="content">
            <p class="singer"><strong>—&ensp;</strong><span id="singer"></span><strong>&ensp;—</strong></p>
            <div class="cover-img pause"><img id="imgCover" src="/public/images/index/demo/demo_04/music_cover_alt.jpg"></div>
        </div>
        <div class="foot">
            <div class="music-progress">
                <span id="currentTime" class="current-time">--:--</span>
                <div class="line-bar">
                    <div class="cover">
                        <span class="progress-dot"></span>
                    </div>
                </div>
                <span id="totalTime" class="total-time">--:--</span>
            </div>
            <div class="operate">
                <img src="/public/images/index/demo/demo_04/player_btn_pre_normal.png" class="backward">
                <img src="/public/images/index/demo/demo_04/player_btn_play_normal.png" id="control" class="player">
                <img src="/public/images/index/demo/demo_04/player_btn_next_normal.png" class="forward">
            </div>
            <ul class="btn-list">
                <li><img src="/public/images/index/demo/demo_04/player_btn_favorite_normal.png" class="ico-fav"></li>
                <li id="switchModel"><img src="/public/images/index/demo/demo_04/player_btn_repeat_normal.png" class="ico-model"></li>
                <li><a href="javascript:;" download id="downloadBtn"><img src="/public/images/index/demo/demo_04/player_btn_download_normal.png" class="ico-download"></a></li>
                <li><img src="/public/images/index/demo/demo_04/player_btn_share_normal.png" class="ico-share"></li>
                <li><img src="/public/images/index/demo/demo_04/player_btn_playlist_normal.png" class="ico-list"></li>
            </ul>
        </div>
        <div class="body-cover"></div>
        <!--顶部提示信息-->
        <div class="top-container">
            <img src="/public/images/index/demo/demo_04/local_music_sort_pressed.png" alt="">
            <span class="text"></span>
        </div>
        <!--底部呼出菜单-->
        <div class="bot-container">
            <div class="list-title">
                <!--<img src="/public/images/index/demo/demo_04/player_btn_repeat_normal.png">-->
                <h5>歌曲列表（<span id="totalSong"></span>首）</h5>
                <a href="javascript:;">清空</a>
            </div>
            <ul class="scroll-pane" id="musicList">

            </ul>
            <!--歌曲列表模版-->
            <li class="list-item-template">
                <a href="javascript:;">
                    <span class="name"></span>
                    <span class="singer">-&nbsp;<span></span></span>
                    <div class="play">
                        <span class="line one"></span>
                        <span class="line two"></span>
                        <span class="line three"></span>
                        <span class="line four"></span>
                    </div>
                </a>
                <img src="/public/images/index/demo/demo_04/list_btn_delete.png" class="delete">
            </li>
            <a href="javascript:;" class="close-list">关闭</a>
        </div>
    </div>
    <!--按钮组-->
    <ul id="btnGroup">
        <h4 class="text-center">屏幕尺寸</h4>
        <a href="?iphone4"><li data-width="320" data-height="480" class="btn btn-info">Iphone 4</li></a>
        <a href="?iphone5"><li data-width="320" data-height="568" class="btn btn-success">Iphone 5</li></a>
        <a href="?iphone6"><li data-width="375" data-height="627" class="btn btn-info">Iphone 6</li></a>
        <a href="?iphone6_plus"><li data-width="414" data-height="736" class="btn btn-info">Iphone 6 plus</li></a>
    </ul>
    <script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/jqueryui/1.11.4/jquery-ui.js"></script>
    <script src="//cdn.bootcss.com/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
    <script src="//cdn.bootcss.com/jScrollPane/2.0.0beta11/script/jquery.jscrollpane.min.js"></script>
    <script>
        //常量
        var $dot = $(".progress-dot");
        var total = $dot.parents(".line-bar").width() - $dot.width();
        var secondTimer;
        var playModel = "repeat";
        var audio = document.getElementById("audio");
        var songArray =[
            {"name":"再见","singer":"G.E.M.邓紫棋","cover":"http://7xnk8k.com1.z0.glb.clouddn.com/music_cover/001.jpg","src":"http://7xnk8k.com1.z0.glb.clouddn.com/music/再见.mp3"}
            ,{"name":"多远都要在一起","singer":"G.E.M.邓紫棋","cover":"http://7xnk8k.com1.z0.glb.clouddn.com/music_cover/002.jpg","src":"http://7xnk8k.com1.z0.glb.clouddn.com/music/多远都要在一起.mp3"}
            ,{"name":"来自天堂的魔鬼","singer":"G.E.M.邓紫棋","cover":"http://7xnk8k.com1.z0.glb.clouddn.com/music_cover/001.jpg","src":"http://7xnk8k.com1.z0.glb.clouddn.com/music/来自天堂的魔鬼.mp3"}
            ,{"name":"盲点","singer":"G.E.M.邓紫棋","cover":"http://7xnk8k.com1.z0.glb.clouddn.com/music_cover/002.jpg","src":"http://7xnk8k.com1.z0.glb.clouddn.com/music/盲点.mp3"}];
        //调整图片宽高
        var imgBoxResize = function(){
            var $box = $(".cover-img");
            var height = $box.parent().height() - $box.prev().height();
            var width = $box.parent().width();
            var boxWidth;
            height < width ? boxWidth = height : boxWidth = width; 
            $box.css({"width":boxWidth - 20,"height":boxWidth - 20,"margin-top": height/2 - (boxWidth - 20)/2,"opacity": 1});
        };
        //进度条相关
        function progress(){
            //拖动进度条
            var $dot = $(".progress-dot");
            $dot.draggable({
                containment: "parent",
                axis:"x",
                stop: function() {
                    var left = parseInt($dot.css("left"));
                    audio.currentTime = left/total * audio.duration;
                    timeChange(audio.currentTime,"currentTime");
                }
            });
            //点击进度条
            $(".line-bar").click(function(e){
                var left = e.offsetX;
                if(left <= 0) left += parseInt($dot.css("left"));
                if(left > total) left = total;
                $dot.css("left",left);
                audio.currentTime = left/total * audio.duration;
                timeChange(audio.currentTime,"currentTime");
            });
        }
        //秒数转分钟
        function timeChange(time, timePlace) {
            var timePlace = document.getElementById(timePlace);
            //分钟
            var minute = time / 60;
            var minutes = parseInt(minute);
            if (minutes < 10) minutes = "0" + minutes;
            //秒
            var second = time % 60;
            seconds = parseInt(second);
            if (seconds < 10) seconds = "0" + seconds;
            var allTime = "" + minutes + "" + ":" + "" + seconds + "";
            if(allTime == "NaN:NaN") allTime = "--:--";
            timePlace.innerHTML = allTime ;
        }
        //屏幕尺寸
        function btnGroup(){
            var href = window.location.search;
            var current = $("a[href='"+href+"']").children();
            var width = current.attr("data-width");
            var height= current.attr("data-height");
            $(".outer").css({"width":width,"height":height});
            current.removeClass("btn-info").addClass("btn-success");
            imgBoxResize();
        }
        //切换播放模式
        function switchModel(){
            $("#switchModel").click(function(){
                var repeat = "/public/images/index/demo/demo_04/player_btn_repeat_normal.png";
                var random = "/public/images/index/demo/demo_04/player_btn_random_normal.png";
                var one = "/public/images/index/demo/demo_04/player_btn_repeat_once_normal.png";
                var $this = $(this);
                var text;
                if($this.find("img").attr("src") == repeat){
                    $this.find("img").attr("src",random);
                    text = "已切换到随机播放模式";
                    playModel = "random";
                }else if($this.find("img").attr("src") == random){
                    $this.find("img").attr("src",one);
                    text = "已切换到单曲循环模式";
                    playModel = "one";
                }else{
                    $this.find("img").attr("src",repeat);
                    text = "已切换到循环播放模式";
                    playModel = "repeat";
                }
                $(".top-container").addClass("show").find(".text").text(text);
                setTimeout(function(){
                    $(".top-container").removeClass("show")
                },1000);
            });
        }
        //歌曲播放相关
        var musicPlay = {
            //初始化歌曲信息
            getSong: function (index) {
                var info = songArray[index];
                $("#songName").text(info.name);
                $("#singer").text(info.singer);
                $("#imgCover").attr("src",info.cover);
                $("#downloadBtn").attr("href",info.src);
                audio.src = info.src;
                audio.setAttribute("data-index",index);
                $dot.css("left",0);
                timeChange(audio.currentTime,"currentTime");
                $("#musicList li").removeClass("active").eq(index).addClass("active");
                //获取歌曲总秒数
                var totalSecond = setInterval(function(){
                    if($("#totalTime").text() != "--:--") window.clearInterval(totalSecond);
                    timeChange(audio.duration,"totalTime");
                },200);
            },
            //点击切换歌曲
            switch : function(){
                $(".backward,.forward").click(function(e){
                    var index = Number(audio.getAttribute("data-index"));
                    var LastIndex = songArray.length - 1;
                    if(playModel == "random"){
                        var random = index;
                        while(index == random){
                            random = parseInt(Math.random()*songArray.length);
                        }
                        musicPlay.getSong(random);
                    }else{
                        if(e.currentTarget.className == "backward"){
                            if(index == 0) musicPlay.getSong(LastIndex);
                            else musicPlay.getSong(index - 1);
                        }else{
                            if(index == LastIndex) musicPlay.getSong(0);
                            else musicPlay.getSong(index + 1);
                        }
                    }
                    musicPlay.play();
                });
            },
            //点击播放、暂停
            control:function(){
                $("#control").click(function() {
                    if ($(this).hasClass("playing")) musicPlay.pause();
                    else musicPlay.play();
                })
            },
            //播放
            play:function(){
                if(audio.ended) $dot.css("left",0);
                $("#control").addClass("playing").attr("src","/public/images/index/demo/demo_04/player_btn_pause_normal.png");
                $(".content .cover-img").removeClass("pause");
                audio.play();
                window.clearInterval(secondTimer);
                musicPlay.musicTimer();
            },
            //暂停
            pause:function(){
                $("#control").removeClass("playing").attr("src","/public/images/index/demo/demo_04/player_btn_play_normal.png");
                $(".content .cover-img").addClass("pause");
                audio.pause();
                window.clearInterval(secondTimer);
            },
            //秒数计时器
            musicTimer :function(){
                secondTimer = setInterval(function(){
                    timeChange(audio.currentTime,"currentTime");
                    var per = total / audio.duration;
                    var left = parseInt($dot.css("left"));
                    if(left >= total) left = total - 1;
                    $dot.css("left",left + Number(per.toFixed(0)));
                    if(audio.ended){
                        if(playModel == "one") musicPlay.play();
                        else $(".forward").click();
                    }
                },1000);
            },
            init:function(){
                musicPlay.control();
                musicPlay.switch();
                musicPlay.getSong(0);
            }
        };
        //歌曲列表相关
        var musicList = {
            //加载歌曲列表
            load:function(){
                $("#totalSong").text(songArray.length);
                for(var i = 0;i< songArray.length;i++){
                    var $template = $(".list-item-template");
                    $template.find(".name").text(songArray[i].name).siblings(".singer").find("span").text(songArray[i].singer);
                    $("#musicList").append($template.clone().removeClass("list-item-template"));
                }
            },
            //点击歌曲
            click:function(){
                $("#musicList li").delegate("a","click",function(){
                    var index = $(this).parent().index();
                    musicPlay.getSong(index);
                    musicPlay.play();
                });
            },
            //删除
            delete:function(){
                $("#musicList li").delegate(".delete","click",function(){
                    var index = $(this).parent().index();
                    songArray.splice(index,1);
                    var active = $(this).parent().hasClass("active");
                    $(this).parent().remove();
                    $("#totalSong").text(songArray.length);
                    if(active) $(".forward").click();
                });
            },
            //显示
            show:function(){
                $(".ico-list").click(function(){
                    $(".body-cover").show();
                    $(".bot-container").addClass("show");
                });
            },
            //隐藏
            hide:function(){
                $(".close-list,.body-cover").click(function(){
                    $(".body-cover").hide();
                    $(".bot-container").removeClass("show");
                });
            },
            //自定义滚动条
            scroll:function(){
                $('.scroll-pane').jScrollPane({
                    mouseWheelSpeed:20
                });
            },
            init:function(){
                musicList.load();
                musicList.click();
                musicList.delete();
                musicList.show();
                musicList.hide();
                musicList.scroll();
            }
        };
        //统一执行入口
        $(function(){
            progress();
            btnGroup();
            switchModel();
            musicList.init();
            musicPlay.init();
        })
    </script>
</body>
</html>